<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>悬红</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/icons-extra.css" rel="stylesheet" />
		<link href="css/uikit.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/uikit.min.js"></script>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我要下单</h1>
			<button id="openlayer" type="button" class="mui-btn mui-btn-link mui-pull-right">完成</button>
		</header>

		<nav class="mui-bar mui-bar-tab tm-bar-tab">
			<a class="mui-tab-item">
				<span class="tm-icon tm-bar-tab-01"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item">
				<span class="tm-icon tm-bar-tab-02"></span>
				<span class="mui-tab-label">需求</span>
			</a>

			<a class="mui-tab-item">
				<span class="tm-icon tm-bar-tab-03"></span>
				<span class="mui-tab-label">接单</span>
			</a>
			<a class="mui-tab-item">
				<span class="tm-icon tm-bar-tab-04"></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item">
				<span class="tm-icon tm-bar-tab-05"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

		<div class="mui-content">
			<div>
				<div class="mui-table-view uk-text-small">
					<div class="mui-table-view-cell mui-media no-active-bg">

						<div class="uk-input-blank">
							<textarea class="uk-input" name="" rows="4" placeholder="详细描述需求内容"></textarea>
						</div>
						<div class="tm-image-listgroup uk-margin-xsmall-top">
							<div class="image-list">
								<div class="image-item" style="background-image: url(images/avatar-04.jpg);">
									<div class="image-close">X</div><input type="file" accept="image/*" id="image-1">
								</div>
								<div class="image-item space">
									<div class="image-close">X</div><input type="file" accept="image/*" id="image-2">
								</div>
							</div>

						</div>

					</div>

				</div>

			</div>

			<div class="uk-margin-xsmall">
				<div class="mui-table-view uk-text-xsmall line-height-24">
					<div class="mui-table-view-cell mui-media no-active-bg">
						<a class="mui-navigate-right" href="#tm-sheet1">
							<div class="mui-table">
								<div class="mui-table-cell uk-text-middle uk-width-1-4">
									<div>
										选择类型
									</div>
								</div>
								<div class="mui-table-cell uk-text-middle">
									<div>
										技术开发
									</div>
								</div>

							</div>
						</a>
					</div>

				</div>

			</div>

			<div class="uk-margin-xsmall">
				<div class="mui-table-view uk-text-xsmall  line-height-24">
					<div class="mui-table-view-cell mui-media no-active-bg">
						<div class="mui-table">
							<div class="mui-table-cell uk-text-middle uk-width-1-4">
								<div>
									支付金额
								</div>
							</div>
							<div class="mui-table-cell uk-text-middle">
								<div class="uk-input-blank">
									<input class="uk-input" type="text" id="" value="100" />
								</div>
							</div>
						</div>

					</div>

				</div>

			</div>

		</div>

		<!-- sheet -->

		<div id="tm-sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view uk-text-gray">
				<li class="mui-table-view-cell">
					<a href="">技术开发</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="">策划文案</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="">二手闲置</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="">网赚推广</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="">生活服务</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="">装修服务</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="">答疑解惑</a>
				</li>
			</ul>

		</div>

		<!-- / sheet -->

		<!-- modal -->
		<div id="layer1" class="tm-layer-modal" style="display: none;">
			<div class="tm-padded-medium">
				<div class="uk-margin">
					<a class="mui-btn mui-btn-danger mui-btn-medium uk-width-1-1" href="">全额支付</a>
				</div>
				<div class="">
					<a class="mui-btn mui-btn-warning mui-btn-medium uk-width-1-1" href="">全额支付</a>
				</div>
			</div>
		</div>
		<!-- / modal -->

		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<script type="text/javascript" src="js/layer/layer.js"></script>
		<script>
			mui(".mui-bar-nav").on('tap','#openlayer',function() {
				layer.open({
					type: 1,
					title: false,
					closeBtn: 0,
					skin: 'layui-layer-nobg', //没有背景色
					shadeClose: true,
					content: $('#layer1')
				});

			})
		</script>
	</body>

</html>